<script setup>
import { ref } from 'vue';

let isAgree = ref(false)

let hobbies = ref([])
</script>

<template>
    <!--1.checkbox单选框-->
    <input type="checkbox" id="agree" v-model="isAgree"><label for="agree">同意协议</label>
    <h2>您选择的是: {{ isAgree }}</h2>
    <button :disabled="!isAgree">下一步</button>
 
    <br>

    <!--2.checkbox多选框-->
    <input type="checkbox" value="篮球" v-model="hobbies" id="basketball"><label for="basketball">篮球</label>
    <input type="checkbox" value="足球" v-model="hobbies" id="footbal"><label for="footbal">足球</label>
    <input type="checkbox" value="乒乓球" v-model="hobbies" id="pingpang"><label for="pingpang">乒乓球</label>
    <input type="checkbox" value="羽毛球" v-model="hobbies" id="badminton"><label for="badminton">羽毛球</label>
    <h2>您的爱好是: {{ hobbies }}</h2>
</template>

<style scoped></style>